<template>
  <div>
    <el-card>
      <span>订单查询如下</span>
      <!--      表格-->
      <el-table :data="queryList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="场地名" prop="orderSpaceName"></el-table-column>
        <el-table-column label="地点" prop="orderSpaceSite"></el-table-column>
        <el-table-column label="预约日期" prop="orderData"></el-table-column>
        <el-table-column label="预约时间" prop="orderTime"></el-table-column>
        <el-table-column label="订购时间" prop="orderCreateTime" min-width="112px"></el-table-column>
        <el-table-column label="订购价格" prop="orderCost"></el-table-column>
        <el-table-column label="有无退订" prop="state" :formatter="formatBoolean">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" round size="mini" @click="cancelOrder(scope.row.orderNo)" :disabled="scope.row.state">退订</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MyOrder",
  created () {
    this.loadMyOrderDetail()
  },
  data () {
    return {
      queryList: []
    }
  },
  methods: {
    loadMyOrderDetail () {
      this.$http.get("/user/orderDetail").then(res => {
        if (res.data.code === 200) {
          this.queryList = res.data.data
          return;
        }
        this.$message.error("查询失败")
      }).catch(err => {
      })
    },

    cancelOrder (orderNo) {
      this.$confirm('确认取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.sendCancelOrder(orderNo);
      })
    },
    formatBoolean (row, column, cellValue) {
      if (cellValue) {
        return "已退订";
      }
      return "未退订"
    },
    sendCancelOrder (orderNo) {
      axios.get('user/cancel?orderNo=' + orderNo).then(res => {
        if (res.data.code === 200) {
          this.$message.success("退订成功");
          this.loadMyOrderDetail();
        } else {
          this.$message.error("退订失败，请重试")
        }
      })
    }
  }
}
</script>

<style scoped>
span {
  margin-left: 500px;
  font-size: 30px;
  color: #0099CC;
}
</style>
